<template>
    <show-modal :title="info && info.id?'员工编辑':'员工新增'" :loading="loading" width="500px" @cancel="cancel" @submit="submit">
        <a-form-model ref="form" :model="form" :rules="rules" v-bind="layout">
            <a-form-model-item label="上传头像" prop="imageUrl">
               <upload-avatar :url="form.imageUrl" :id="form.id" @upload="uploadImage" @delete="deleteAvatar"/>
            </a-form-model-item>
            <a-form-model-item label="用户名" prop="name">
                <a-input v-model.trim="form.name" :disabled="form.userId?true:false" placeholder="请填写用户名" />
            </a-form-model-item>
            <a-form-model-item label="性别" prop="sex">
                <a-select v-model="form.sex" placeholder="请选择性别">
                    <a-select-option value="M">男</a-select-option>
                    <a-select-option value="F">女</a-select-option>
                </a-select>
            </a-form-model-item>
            <a-form-model-item label="人员编码">
                <a-input v-model.trim="form.code" placeholder="请填写人员编码" />
            </a-form-model-item>
            <a-form-model-item label="年龄">
                <a-input-number style="width:100%;" v-model.trim="form.age" :min="18" :max="80" placeholder="请填写年龄" />
            </a-form-model-item>
            <a-form-model-item label="部门" prop="deptId">
                <a-tree-select
                    v-model="form.deptId"
                    :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
                    :tree-data="deptList"
                    :replaceFields="{children:'children',
                    title:'deptName',
                    key:'deptId',
                    value: 'deptId' }"
                    placeholder="请选择部门"
                >
                </a-tree-select>
                <!-- <a-cascader
                    :options="deptList"
                    v-model="form.deptId"
                    :fieldNames="{ label: 'deptName', value: 'deptId', children: 'children' }"
                    placeholder="请选择部门" /> -->
            </a-form-model-item>

            <a-form-model-item label="岗位">
                <a-input v-model.trim="form.post" placeholder="请填写岗位" />
            </a-form-model-item>
            <!-- <a-form-model-item label="主管" prop="manager">
                <a-input v-model.trim="form.manager" placeholder="请填写主管" />
            </a-form-model-item> -->
            <a-form-model-item label="入职时间">
                <a-date-picker
                    v-model.trim="form.entryTime"
                    :format="dateFormat"
                    @change="onChangeTime"
                    placeholder="请选择入职时间"/>
            </a-form-model-item>
            <a-form-model-item label="状态" prop="status">
                <a-switch
                    :checked="form.status == 'A' ? true : false"
                    checked-children="在职"
                    un-checked-children="离职"
                    @change="onChangeShow" />
            </a-form-model-item>
             <a-form-model-item label="备注">
                <a-textarea placeholder="请输入备注" :max-length="100" v-model="form.comments" />
            </a-form-model-item>

        </a-form-model>
    </show-modal>
</template>

<script>
import { rules } from './rules';
import UploadAvatar from '@/components/uploadAvatar'
import { addInfo, updateInfo } from '@/api/system/staff';
import { mapState } from 'vuex';
import {deepClone} from '@/utils'

export default {
    name: 'UserInfo',
    components:{
        UploadAvatar
    },
    props: {
        info: {
            type: Object,
            default: () => {}
        },
        deptList:{
            type: Array,
            default: () => []
        }
    },
    data() {
        return {
            loading: false,
            rules,
            title: '用户信息',
            form: {
                imageUrl:'',
                name: '',
                sex:undefined,
                age:'',
                deptId:null,
                post:'',
                manager:'',
                code:'',
                entryTime:null,
                comments:'',
                status: "A"
            },
            dateFormat:'YYYY-MM-DD',
            layout: {
                labelCol: { span: 4 },
                wrapperCol: { span: 20 }
            },
        };
    },
    computed: {
        ...mapState({
            accountInfo: state => state.user.accountInfo
        })
    },
    created() {
        this.form = { ...this.form, ...this.info}
        // let {deptId=''} = this.info;
        // if(deptId){
        //     let deptList = deepClone(this.deptList)
        //     var filter = deptList.filter((item)=>{
        //         return this.filterDeptData(item,deptId);
        //     });
        //     let deptIds = this.getDeptId(filter)
        //     this.form.deptId = deptIds;
        // }
    },
    methods: {
        submit() {
            this.$refs.form.validate(async valid => {
                if (valid) {
                    try {
                        let res = null;
                        let form = deepClone(this.form);
                            // form.deptId = form.deptId[form.deptId.length-1]
                        this.loading = true;
                        if (this.form.id) {
                            delete form.imageUrl
                            res = await updateInfo(form);
                        } else {
                            res = await addInfo(form);
                        }
                        if(res.code==200){
                            this.$message.success('操作成功!');
                            this.$emit('submit');
                        }
                    } finally {
                        this.loading = false
                    }
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        uploadImage(e){
            this.form.imageUrl = e;
        },
        deleteAvatar(){
            this.form.imageUrl= ''
        },
        //切换状态
        onChangeShow(checked) {
            if (checked) {
                this.form.status = 'A';
            } else {
                this.form.status = 'I';
            }
        },
        //取消
        cancel() {
            this.$emit('cancel');
        },
        onChangeTime(value, dateString) {
            this.form.entryTime = dateString
        },
        //数组去重
        uniqueArray(data) {
            let map = new Map();
            let array = new Array(); // 数组用于返回结果
            for (let i = 0; i < data.length; i++) {
                if (map.has(data[i].areaCode)) {
                    // 如果有该key值
                    map.set(data[i].areaCode, true);
                } else {
                    map.set(data[i].areaCode, true); // 如果没有该key值
                    array.push(data[i]);
                }
            }
            return array;
        },
        getDeptId(data){
            let res = []
            data.map(item=>{
                res.push(item.deptId);
                if(item.children){
                    return res = [...res,...this.getDeptId(item.children)]
                }
            })
            return res
        },
        filterDeptData(item,deptId){
            if(item.deptId==deptId) return true;
            if(item.hasOwnProperty("children")){
                item.children = item.children.filter((child)=>{
                    if(child.deptId==deptId){
                        return child.deptId==deptId;
                    }else if(child.hasOwnProperty("children")){
                        return this.filterDeptData(child,deptId);
                    }
                })
                if(item.children.length > 0){
                    return true;
                }
            }else{
                return child.deptId==deptId;
            }
        },
    }
};
</script>

<style lang="scss" scoped>
.tree_box {
    display: flex;
    align-items: center;
    .select {
        margin: 0 10px;
        width: 580px;
    }
}
.area_box {
    display: flex;
    flex-wrap: wrap;
    margin-left: -15px;
    margin-bottom: 10px;
    .area_item {
        font-size: 14px;
        color: #666;
        margin-left: 15px;
        line-height: 2;
        .close {
            margin-left: 5px;
            color: #ff4d4f;
        }
    }
}
</style>
